<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bigmodelapi</title>
  </head>
  <body>
    <h1>bigmodelapi</h1>
    <a href="/docs">swagger</a>
    <p></p>
    <h3>翻译</h3>
    <textarea
      id="translationInput"
      placeholder="输入要翻译的内容"
      rows="10"
    ></textarea>
    <button id="translateButton">翻译</button>
    <textarea id="translationResult" readonly rows="10"></textarea>

    <script>
      const inputElement = document.getElementById("translationInput");
      const resultElement = document.getElementById("translationResult");
      const translateButton = document.getElementById("translateButton");

      const performTranslation = () => {
        const text = inputElement.value;
        fetch(`/fanyi?text=${encodeURIComponent(text)}`)
          .then((response) => response.text())
          .then((data) => {
            resultElement.value = data.replace(/^"|"$/g, "");
          })
          .catch((error) => {
            resultElement.value = "翻译过程中出现错误，请重试。";
          });
      };

      inputElement.addEventListener("keypress", function (event) {
        if (event.key === "Enter") {
          event.preventDefault();
          performTranslation();
        }
      });

      translateButton.addEventListener("click", performTranslation);
    </script>
  </body>
</html>
